<template>
	<scroll-view scroll-y="true" @scroll="handleScroll" :scroll-top="scrollH" style="height: 100vh">
		<!-- 头部标签 -->
		<view class="hear-box" :class="{ 'scroll-bottom': isScrollBottom }">
			<view
				class="hear-box1"
				:style="{ paddingTop: top + 'px', height: height + 'px', justifyContent: winInfo && winInfo.hostName !== 'WeChat' ? 'space-between' : 'flex-start' }"
			>
				<image src="/static/images/huodong/left.png" class="headr-img" style="z-index: 9999" mode="widthFix" @tap="goBack()"></image>
				<image :src="userInfo.Avatar || '/static/images/my/noAvatar.svg'" class="header-avatar" mode="aspectFill" v-if="isScrollBottom"></image>
				<!-- <image src="/static/images/my/search.png" class="headr-img" v-if="winInfo && winInfo.hostName !== 'WeChat'"></image> -->
				<tui-icon name="share" @tap="caozuoShow" color="#fff" size="20"></tui-icon>
			</view>
			<view class="tui-tabs" v-if="fixTabsShow">
				<tui-tabs :tabs="tabs" itemWidth="33%" color="#000" sliderBgColor="#FB353B" selectedColor="#FB353B" :currentTab="currentTab" @change="changeTab"></tui-tabs>
			</view>
		</view>
		<view class="header-img" v-if="userInfo.BeijingT">
			<view class="hear-mask"></view>
			<image :src="userInfo.BeijingT" mode="aspectFill"></image>
		</view>
		<view class="user-boxinfo" :style="{ paddingTop: height + 'px' }">
			<image :src="userInfo.Avatar || '/static/images/my/noAvatar.svg'" class="user-avatar" mode="aspectFill"></image>
			<view class="user-info">
				<view class="user-name">
					<view>{{ userInfo.Name || '暂无昵称' }}</view>
					<image src="/static/images/my/girl.png" v-if="!userInfo.ShifouYCXB && userInfo.Sex && userInfo.Sex == '女'"></image>
					<image src="/static/images/my/boy.png" v-if="!userInfo.ShifouYCXB && userInfo.Sex && userInfo.Sex == '男'"></image>
				</view>
				<view class="guanzhu-btn" v-if="userInfo.friend">好友</view>
				<view class="guanzhu-btn" v-else-if="userInfo.Guanzhu == 0" @tap="guanzhuUser">关注</view>
				<view class="guanzhu-box" v-else-if="userInfo.Guanzhu == 1">
					<view class="add-haoyou" @tap="addUser">加为好友</view>
					<tui-icon name="ellipsis" color="#fff" size="20" @tap="moreBtn = !moreBtn"></tui-icon>
					<tui-bubble-popup
						:show="moreBtn"
						:mask="false"
						position="absolute"
						direction="top"
						@close="hideMoreBtn"
						width="160rpx"
						left="0"
						top="-60rpx"
						translateY="100"
						translateX="100"
						backgroundColor="#fff"
						triangleRight="10rpx"
						triangleTop="-22rpx"
					>
						<view class="header-btn-box" @tap="guanzhuUser">
							<image src="/static/images/company/hongxin.png"></image>
							<view class="">取消关注</view>
						</view>
					</tui-bubble-popup>
				</view>

				<view class="user-school" v-if="userInfo.BiyeYX && userInfo.BiyeYX != '{}'">{{ userInfo.BiyeYX ? userInfo.BiyeYX : '学校信息暂无' }}</view>
				<view class="IP-container">
					<view v-if="userInfo.Gongsi && userInfo.Zhiwei" class="user-work">{{ userInfo.Gongsi }}-{{ userInfo.Zhiwei }}</view>
					<view class="IP-info" style="margin: 0" v-if="userInfo.IPsd">IP:{{ userInfo.IPsd ? JSON.parse(userInfo.IPsd)[0] : '暂无' }}</view>
				</view>
			</view>
		</view>
		<!-- 计数统计 -->
		<view class="count-container">
			<view class="count-box" @tap="Tuijian(1)">
				<view>{{ computeNum(userInfo.fansCount) || 0 }}</view>
				<view class="count-title">粉丝</view>
			</view>
			<view class="count-box" @tap="Tuijian(2)">
				<view>{{ computeNum(userInfo.GuanzhuCount) || 0 }}</view>
				<view class="count-title">关注</view>
			</view>
			<view class="count-box" @tap="Tuijian(3)">
				<view>{{ computeNum(userInfo.RenmaiCount) || 0 }}</view>
				<view class="count-title">获赞与收藏</view>
			</view>
			<view class="header-btnContainer">
				<view class="concat-btn" @tap="sendMessage(userInfo.Id, userInfo.Account)">
					<image src="/static/images/my/zixun.png"></image>
				</view>
				<view class="Tuijian-box" @tap="TuiJianHer" v-if="userInfo.TuiJian || userInfo.TuiJian > 0">取消推荐</view>
				<view class="Tuijian-box" @tap="TuiJianHer" v-else>推荐{{ userInfo.Sex == '女' ? '她' : '他' }}</view>
			</view>
		</view>
		<!-- 我的技能 -->
		<view class="my-Jineng" v-if="userInfo.Jineng && userInfo.Jineng != 'null' && JSON.parse(userInfo.Jineng).length">
			<view class="jineng-title">技能</view>
			<view class="jineng-container">
				<view class="jineng-box" v-for="item in JSON.parse(userInfo.Jineng)">
					{{ item }}
				</view>
			</view>
		</view>
		<!-- 内容区域 -->
		<view class="container" :style="{ background: currentTab != 2 ? '#f6f6f6' : '#F4F5F6' }">
			<tui-tabs
				:tabs="tabs"
				v-if="!fixTabsShow"
				itemWidth="33%"
				color="#000"
				sliderBgColor="#FB353B"
				selectedColor="#FB353B"
				:currentTab="currentTab"
				@change="changeTab"
			></tui-tabs>
			<!-- 名片内容 -->
			<view v-if="currentTab == 0" class="scroll-box" :style="{ paddingBottom: winInfo.safeAreaInsets.bottom + 'px' }">
				<!-- 教育经历 -->
				<view class="MP-box">
					<view class="MP-titleBox">
						<view class="MP-title">
							<view class="zhu-box"></view>
							<view>教育经历</view>
						</view>
						<view class="more-btn" v-if="userInfo.educationJL && userInfo.educationJL.length" @tap="moreJL" @tap.stop="moreJL('教育经历')">更多</view>
					</view>
					<view class="" v-if="userInfo.educationJL && userInfo.educationJL.length">
						<timeLine :list="userInfo.educationJL"></timeLine>
					</view>
					<view class="no-Data-info" v-else>
						<view>暂无上传教育经历</view>
					</view>
				</view>
				<!-- 荣誉证书 -->
				<view class="MP-box">
					<view class="MP-titleBox">
						<view class="MP-title">
							<view class="zhu-box"></view>
							<view>荣誉/证书</view>
						</view>
					</view>
					<view class="Rongyu-info" v-if="userInfo.RongyuZS">{{ userInfo.RongyuZS }}</view>
					<view class="no-Data-info" v-else>
						<view>暂无上传荣誉</view>
					</view>
				</view>
				<!-- 他人评价 -->
				<view class="MP-box">
					<view class="MP-titleBox">
						<view class="MP-title">
							<view class="zhu-box"></view>
							<view>评价</view>
						</view>
						<view class="add-Pingjia" @tap="addPinglunShow">添加评价</view>
					</view>
					<view class="pinglun-container" :style="{ paddingBottom: winInfo.safeAreaInsets.bottom + 'px' }" v-if="PinglunInfo.Data && PinglunInfo.Data.length">
						<view class="pinglun-box" v-for="item in PinglunInfo.Data">
							<image :src="item.Avatar || '/static/images/my/noAvatar.svg'" mode="aspectFill"></image>
							<view>
								<view class="user-box">
									<view>{{ item.Name }}</view>
									<view class="pinglun-time">{{ item.CreateTime }}</view>
								</view>
								<view class="pinglun-NR">
									{{ item.PingjiaNR }}
								</view>
							</view>
						</view>
					</view>
					<view class="no-Data-info" v-else>
						<view>暂无评价</view>
					</view>
				</view>
			</view>
			<!-- 笔记内容 -->
			<view v-if="currentTab == 1" class="scroll-box" :style="{ paddingBottom: winInfo.safeAreaInsets.bottom + 'px' }">
				<view class="biji-container" v-if="tabs[currentTab].Data.length">
					<view v-for="(item, index) in tabs[currentTab].Data" class="biji-box" @tap="toWenZhangDetail(item)">
						<image
							v-if="item.TupianMS && JSON.parse(item.TupianMS).length"
							:src="JSON.parse(item.TupianMS)[0].url"
							class="biji-image"
							style="max-height: 500rpx"
							mode="aspectFill"
						></image>
						<view v-else-if="item.Shipin" style="position: relative">
							<view class="play-btn">
								<tui-icon name="turningright" color="#fff" size="20"></tui-icon>
							</view>
							<image v-if="item.Fengmian" :src="Microi.FileServer + item.Fengmian" mode="aspectFill" class="biji-image" style="max-height: 500rpx"></image>
							<video
								:controls="false"
								:show-center-play-btn="false"
								class="biji-image"
								v-else
								:src="item.Shipin"
								:object-fit="'cover'"
								:enable-progress-gesture="false"
								:show-fullscreen-btn="false"
								:show-play-btn="false"
								:enable-play-gesture="false"
							></video>
						</view>

						<view class="no-img-box" v-else>
							<image src="/static/images/find/douhao.png" mode="widthFix" class="douhao-img"></image>
							<view class="no-img-nr">
								{{ item.Biaoti }}
							</view>
							<view class="bottom-bgc"></view>
						</view>
						<view class="biji-info">
							<view class="biji-biaoti">{{ item.Biaoti }}</view>
							<view class="biji-line">
								<view class="left-box">
									<image :src="item.Avatar" mode="aspectFill"></image>
									<view class="biji-name">{{ item.Name }}</view>
								</view>
								<view class="right-box" @tap.stop="DianzanSC(item, index)">
									<image v-if="item.myZan" src="/static/images/company/hongxin.png"></image>
									<image v-else src="/static/images/company/xin.png"></image>
									<view class="biji-name" :style="{ color: item.myZan ? '#FA1B0A' : '#666666' }">{{ computeNum(item.DianzanL) }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="no-Data" v-else>
					<image src="/static/images/my/noBiji.png"></image>
					<view>该用户还未发布过任何笔记</view>
				</view>
			</view>
		</view>
	</scroll-view>

	<!-- 荣誉证书 -->
	<tui-modal :show="addBQmodel" custom padding="0">
		<view class="qianming-popup">
			<view class="qianming-header">
				<view @tap="addBQmodel = false" style="color: #8d8d8e">取消</view>
				<view class="qianming-title">我的荣誉</view>
				<view @tap="saveRongyu" style="color: #5e59e8">保存</view>
			</view>
			<textarea type="text" :adjust-position="false" :focus="Qmfocus" v-model="RongyuZS" maxlength="-1" placeholder="荣誉证书" />
		</view>
	</tui-modal>
	<!-- 完善名片 -->
	<tui-modal :show="PingPTipsModel" @cancel="PingPTipsModel = false" position="flex-end" padding="0" custom>
		<view class="MingPian-tips-model">
			<view class="modal-BT">请添加为好友之后进行推荐</view>
			<view class="wanS-btn" @tap="toaddFriend">加为好友</view>
		</view>
	</tui-modal>
	<!-- 添加好友 -->
	<tui-modal :show="AddFriend" @cancel="AddFriend = false" padding="0" custom>
		<view class="MingPian-tips-model" style="height: auto">
			<view class="modal-BT">添加好友</view>
			<textarea name="" placeholder="请输入申请语" v-model="ShenqingLY" placeholder-class="model-input" cols="30" rows="10"></textarea>
			<view class="wanS-btn" @tap="sendYaoqing">发送邀请</view>
		</view>
	</tui-modal>
	<!-- 添加评论 -->
	<tui-modal :show="PinglunAddModal" @cancel="PinglunAddModal = false" padding="0" custom>
		<view class="MingPian-tips-model" style="height: auto">
			<view class="modal-BT">添加评论</view>
			<textarea name="" placeholder="请输入评论" v-model="Pinglun" placeholder-class="model-input" cols="30" rows="10"></textarea>
			<view class="wanS-btn" @tap="addPinglun">添加</view>
		</view>
	</tui-modal>
	<!-- 分享 -->
	<tui-bottom-popup :zIndex="1002" backgroundColor="#F5F5F5" :maskZIndex="1001" :show="zhuanfaShow" @close="zhuanfaShow = false">
		<view class="popup-header">
			<view>分享至</view>
			<tui-icon name="shut" @tap="zhuanfaShow = false" color="#3e3e3e" size="20" class="popup-close"></tui-icon>
		</view>
		<view class="popup-line">
			<scroll-view scroll-x="true" style="white-space: nowrap" @scrolltoupper="getFriendList">
				<view style="display: inline-flex">
					<view class="friend-box" v-for="(item, index) in friendsList.Data" @tap="shareUser(item, index)">
						<view class="friend-avatar">
							<image :src="item.Avatar || '/static/images/my/noAvatar.svg'" mode="aspectFill"></image>
							<view class="select-box" v-if="shareUserInfo.userList && shareUserInfo.userList.length">
								<tui-icon name="circle" color="#999" size="20" v-if="!item.Selected"></tui-icon>
								<tui-icon name="circle-fill" color="#0a66c2" size="20" v-else></tui-icon>
							</view>
						</view>
						<view>{{ item.NAME }}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="popup-line" v-if="!shareUserInfo.userList.length">
			<!-- <view class="share-box">
				<image src="/static/images/find/sixin.svg" class="share-img" mode="aspectFill"></image>
				<view>私信好友</view>
			</view> -->
			<button v-if="winInfo.uniPlatform == 'mp-weixin'" open-type="share" style="margin: 0; padding: 0; line-height: normal">
				<view class="share-box">
					<image src="/static/images/find/wechat.svg" class="share-img" mode="aspectFill"></image>
					<view>微信好友</view>
				</view>
			</button>
			<view v-else class="share-box" @tap="shareWechat">
				<image src="/static/images/find/wechat.svg" class="share-img" mode="aspectFill"></image>
				<view>微信好友</view>
			</view>
		</view>
		<view v-if="shareUserInfo.userList.length" class="popup-line share-NR" style="border: 0">
			<textarea v-model="shareUserInfo.pinglunNR" placeholder-class="input-placeholder" placeholder="和朋友说点什么吧......"></textarea>
			<image v-if="currentInfo" class="user-avatar" :src="currentInfo.Avatar" mode="aspectFill"></image>
		</view>
		<view v-if="shareUserInfo.userList.length" class="fasong-btn" @tap="shareMessage">发送</view>
	</tui-bottom-popup>
</template>

<script>
import timeLine from '/uni_modules/qhhh-timeline/components/qhhh-timeline/qhhh-timeline.vue';
import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';
export default {
	components: {
		timeLine
	},

	data() {
		return {
			startTime: 0,
			CurrentUser: this.Microi.GetCurrentUser(),
			Islogin: this.Microi.IsLogin(),
			leftPopup: false,
			options: {},
			winInfo: {
				safeAreaInsets: {
					bottom: 34
				}
			},
			userInfo: {},
			PinglunInfo: {
				page: 1,
				noData: false,
				Data: []
			},
			BijiIndex: 0,
			height: 64, //header高度
			top: 26, //标题图标距离顶部距离
			scrollH: 0, //滚动总高度
			currentTab: 0,
			width: 0,
			AddFriend: false,
			ShenqingLY: '你好，希望能添加你为好友',
			Pinglun: '',
			PinglunAddModal: false,
			PingPTipsModel: false,
			tabs: [
				{
					name: '名片'
				},
				{
					name: '笔记',
					page: 1,
					noData: false,
					Data: []
				}
			],
			addBQmodel: false,
			Qmfocus: false,
			RongyuZS: '',
			moreBtn: false,
			isScrollBottom: false,
			newFriendApplyId: '',
			zhuanfaShow: false,
			shareUserInfo: {
				userList: [],
				pinglunNR: ''
			},
			friendsList: {
				page: 1,
				Data: [],
				noData: false
			},
			currentInfo: {},
			fixTabsShow: false
		};
	},
	mounted() {
		let obj = {};
		// #ifdef MP-WEIXIN
		obj = wx.getMenuButtonBoundingClientRect();
		// #endif
		setTimeout(() => {
			uni.getSystemInfo({
				success: (res) => {
					console.log(res);
					this.width = obj.left || res.windowWidth;
					this.tabwidth = this.width * 0.45;
					this.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight + 44;

					this.top = obj.top ? obj.top + (obj.height - 32) / 2 : res.statusBarHeight + 6;
					this.winInfo = res;
					// this.scrollH = res.windowWidth;
				}
			});
		}, 0);
	},
	onShow() {
		this.startTime = new Date();
	},
	onLoad(options) {
		this.options = options;
		if (options.ShangjiID) uni.setStorageSync('ShangjiID');
		this.getUserInfo();
	},
	onHide() {
		// console.log('hide');
		if (this.Islogin) {
			// 获取当前页面栈
			const pages = getCurrentPages();
			// 获取当前页面的对象
			const currentPage = pages[pages.length - 1];
			// 获取当前页面的路径
			const route = currentPage.route;
			// 获取当前页面的参数
			const options = currentPage.options;
			this.Microi.ApiEngine.Run('Add_liulanLog', {
				YemianCS: options,
				YemianDZ: route,
				LiulanSJC: new Date().getTime() - this.startTime.getTime()
			});
		}
	},
	onUnload() {
		if (this.Islogin) {
			// 获取当前页面栈
			const pages = getCurrentPages();
			// 获取当前页面的对象
			const currentPage = pages[pages.length - 1];
			// 获取当前页面的路径
			const route = currentPage.route;
			// 获取当前页面的参数
			const options = currentPage.options;
			this.Microi.ApiEngine.Run('Add_liulanLog', {
				YemianCS: options,
				YemianDZ: route,
				LiulanSJC: new Date().getTime() - this.startTime.getTime()
			});
		}
	},
	methods: {
		async getUserInfo() {
			var self = this;
			var res = await self.Microi.ApiEngine.Run('get_UserInfo', {
				YonghuID: self.options.Id
			});
			self.userInfo = res.Data;
			if (!self.userInfo.BeijingT) {
				self.get_morenBGC();
			}
			this.getPingList();
		},
		moreJL(name) {
			if (name == '教育经历') {
				uni.navigateTo({
					url: '/pages/my/MP/educationjy/educationjy?Id=' + this.options.Id
				});
			} else {
				uni.navigateTo({
					url: '/pages/my/MP/workjy/workjy?Id=' + this.options.Id
				});
			}
		},
		toWenZhangDetail(item) {
			if (item.Shipin) {
				uni.navigateTo({
					url: '/pages/my/Biji/shipin?Id=' + item.InfoId
				});
			} else {
				uni.navigateTo({
					url: '/pages/my/Biji/tuwen?Id=' + item.InfoId
				});
			}
		},
		async getPingList() {
			var self = this;
			if (self.PinglunInfo.noData) return;
			var res = await self.Microi.ApiEngine.Run('get_YonghuPinglun', {
				YonghuID: self.options.Id,
				page: self.PinglunInfo.page
			});
			if (!res.Data.length) {
				self.PinglunInfo.noData = true;
				return;
			}
			self.PinglunInfo.Data.push(...res.Data);
			self.PinglunInfo.page++;
		},
		addPinglunShow() {
			var self = this;
			if (this.Islogin) {
				if (self.options.Id == self.CurrentUser.Id) {
					self.Microi.Tips('快叫好友来给您填写吧～', false);
					return;
				}
				self.PinglunAddModal = true;
			} else {
				this.Microi.Tips('请先登录', false);
			}
		},
		async addPinglun() {
			var self = this;
			if (!self.Pinglun) {
				this.Microi.Tips('请输入评论信息', false);
				return;
			}
			uni.showLoading({
				title: '评论提交中～',
				mask: true
			});
			var res = await self.Microi.ApiEngine.Run('add_userPinglun', {
				YonghuID: self.options.Id,
				PingjiaNR: self.Pinglun
			});
			self.PinglunAddModal = false;
			uni.hideLoading();
			if (res.Code == 1) {
				self.Microi.Tips('评论成功', true);
				self.PinglunInfo.Data.unshift({
					Account: self.CurrentUser.Account,
					Avatar: self.CurrentUser.Avatar || '',
					CreateTime: res.Data.CreateTime,
					Name: self.CurrentUser.Name,
					PingjiaNR: res.Data.PingjiaNR,
					YonghuID: res.Data.YonghuID
				});
			} else {
				self.Microi.Tips(res.Msg, true);
			}
		},
		async sendMessage(userID, Account) {
			var UserSig = await this.Microi.ApiEngine.Run('get_Im_UserId', {
				Account: this.CurrentUser.Account
			});
			UserSig = UserSig.Data;
			const conversationID = `C2C${Account}`;
			uni.setStorageSync('receiverInfo', { userID: Account });
			TUIConversationService.switchConversation(conversationID);
			uni.navigateTo({
				url: '/pages/message/chatUser?YonghuID=' + userID + '&conversationID=' + conversationID + '&Account=' + Account
			});
		},
		async get_morenBGC() {
			var self = this;
			var res = await self.Microi.ApiEngine.Run('customize_crud', {
				EngineKey: 'KEY000007'
			});
			self.userInfo.BeijingT = this.Microi.FileServer + res.Data;
		},
		getMoreData() {
			var currentTab = this.currentTab;
			if (currentTab == 0) {
				this.getPingList();
			} else if (currentTab == 1) {
				this.getMyTuiJian();
			} else {
				this.getUserBiji();
			}
		},
		async DianzanSC(item, index) {
			if (this.Islogin) {
				var self = this;
				var res = await self.Microi.ApiEngine.Run('user_dianzanOrsc', {
					Id: item.WenzhangID || item.GongsiID,
					Caozuo: '点赞',
					Leixing: item.Leixing,
					Type: item.myZan,
					ZuozheID: item.ZuozheID
				});

				var info = self.tabs[1].Data[index];
				if (item.myZan) {
					info.myZan = 0;
					info.DianzanL--;
				} else {
					info.myZan = 1;
					info.DianzanL++;
				}
			} else {
				this.Microi.Tips('请先登录', false);
				setTimeout(function () {
					uni.navigateTo({
						url: '/pages/common/login/login'
					});
				}, 1000);
			}
		},
		dynamicHeight() {
			return `calc(100vh - ${this.height}px)`;
		},
		toaddFriend() {
			this.userInfo.Guanzhu = 0;
			this.guanzhuUser();
			this.PingPTipsModel = false;
			this.AddFriend = true;
		},
		addUser() {
			if (!this.Islogin) {
				this.Microi.Tips('请先登录~', false);
				return;
			}
			this.ShenqingLY = '你好，希望能添加你为好友';
			this.AddFriend = true;
		},
		editRY() {
			this.addBQmodel = true;
			this.Qmfocus = true;
		},
		educationJL() {
			uni.navigateTo({
				url: '/pages/my/MP/educationjy/educationjy'
			});
		},
		async sendYaoqing() {
			var self = this;
			if (!self.ShenqingLY) {
				this.Microi.Tips('请输入申请语', false);
				return;
			}
			var res = await self.Microi.ApiEngine.Run('add_friends', {
				ShenqingLY: self.ShenqingLY,
				ShenqingRID: self.CurrentUser.Id,
				BeishenQRID: self.options.Id
			});
			if (res.Code == 1) {
				self.Microi.Tips(res.Msg, true);
				self.AddFriend = false;
				self.ShenqingLY = '你好，希望能添加你为好友';
			} else {
				self.Microi.Tips(res.Msg, false);
			}
		},
		computeNum(num) {
			num = num * 1;
			if (num > 10000) {
				return num / 10000 + 'w+';
			} else if (num > 1000) {
				return num / 1000 + 'k+';
			} else {
				return num;
			}
		},
		async getMyTuiJian() {
			if (this.tabs[this.currentTab].noData) {
				return;
			}
			var self = this;
			var res = await self.Microi.ApiEngine.Run('get_TuiJianUserList', {
				YonghuID: self.options.Id,
				page: self.tabs[this.currentTab].page
			});
			if (!res.Data.length) {
				this.tabs[this.currentTab].noData = true;
				return;
			}
			this.tabs[this.currentTab].Data.push(...res.Data);
			this.tabs[this.currentTab].page++;
		},
		async getUserBiji() {
			if (this.tabs[this.currentTab].noData) {
				return;
			}
			var self = this;
			var res = await self.Microi.ApiEngine.Run('get_UserBiji', {
				YonghuID: self.options.Id,
				page: self.tabs[this.currentTab].page,
				MyId: self.CurrentUser?.Id
			});
			if (!res.Data.length) {
				this.tabs[this.currentTab].noData = true;
				return;
			}
			this.tabs[this.currentTab].Data.push(...res.Data);
			this.tabs[this.currentTab].page++;
		},
		addMBTI() {
			var self = this;
			if (this.Islogin) {
				if (self.options.Id == self.CurrentUser.Id) {
					self.Microi.Tips('快叫好友来给您评价吧～', false);
					return;
				}
				uni.navigateTo({
					url: '/pages/my/mbtiList/mbtiList?Id=' + this.options.Id
				});
			} else {
				this.Microi.Tips('请先登录', false);
			}
		},
		async guanzhuUser() {
			if (!this.Islogin) {
				this.Microi.Tips('请先登录', false);
				return;
			}
			this.moreBtn = false;
			var self = this;
			var res = await self.Microi.ApiEngine.Run('GuanZhu_user', {
				YonghuID: self.options.Id,
				Type: this.userInfo.Guanzhu
			});
			if (res.Code != 1) {
				this.Microi.Tips(res.Msg, false);
			} else {
				// this.Microi.Tips(res.Msg, true);
				this.userInfo.Guanzhu = this.userInfo.Guanzhu ? 0 : 1;
			}
		},
		UserDetail(Id) {
			this.options.Id = Id;
			this.tabs = [
				{
					name: '名片'
				},
				{
					name: '笔记'
				},
				{
					name: '推荐',
					page: 1,
					noData: false,
					Data: []
				}
			];
			this.currentTab = 0;
			this.getUserInfo();
		},
		async TuiJianHer() {
			if (!this.Islogin) {
				this.Microi.Tips('请先登录', false);
				return;
			}
			if (!this.userInfo.friend) {
				this.PingPTipsModel = true;
				return;
			}
			var self = this;
			var res = await self.Microi.ApiEngine.Run('TuiJian_user', {
				YonghuID: self.options.Id,
				Type: this.userInfo.TuiJian || ''
			});
			if (res.Code != 1) {
				this.Microi.Tips(res.Msg, false);
			} else {
				this.Microi.Tips(res.Msg, true);
				this.userInfo.TuiJian = this.userInfo.TuiJian ? 0 : 1;
			}
		},
		changeTab(e) {
			this.scrollH = 0;
			this.currentTab = e.index;
			if(this.currentTab == 1 && !this.tabs[this.currentTab].Data.length && !this.tabs[this.currentTab].noData) {
				this.getUserBiji();
			}
		},
		hideMoreBtn() {
			this.moreBtn = false;
		},
		goBack() {
			let pages = getCurrentPages(); // 获取当前页面堆栈
			let pageCount = pages.length; // 页面堆栈中的页面数量
			// 判断是否有上级页面
			if (pageCount > 1) {
				// 如果有上级页面，则返回上级页面
				uni.navigateBack({
					delta: 1
				});
			} else {
				// 如果没有上级页面，则返回首页
				uni.switchTab({
					url: '/pages/tabbar/find/find' // 替换为你的首页路径
				});
			}
		},
		handleScroll(e) {
			const scrollTop = e.detail.scrollTop;
			// this.scrollH = scrollTop;
			this.isScrollBottom = scrollTop > 100;
			this.fixTabsShow = scrollTop / this.winInfo.screenHeight >= 0.37;
		},
		// 分享
		shareWechat() {
			var self = this;
			var path = '/pages/my/myDetail/myDetail';
			// 获取当前页面的路径
			var route = path + '?Id=' + this.options.Id;
			if (this.Islogin) {
				route = route + '&ShangjiID=' + this.CurrentUser.Id;
			}
			var imageUrl = '';
			if (this.userInfo.Avatar) {
				imageUrl = this.userInfo.Avatar;
			}
			uni.share({
				provider: 'weixin',
				scene: 'WXSceneSession',
				type: 5,
				title: this.userInfo.Name + '名片分享',
				imageUrl: imageUrl || 'https://minio.nbweixin.cn/public/baiying/img/20250506/byingLOGO_3x.png',
				miniProgram: {
					id: 'gh_b4436e0c5cb3',
					path: route,
					type: 2,
					webUrl: this.Microi.Weburl
				},
				success: function (res) {
					console.log('success:' + JSON.stringify(res));
				},
				fail: function (err) {
					console.log('fail:' + JSON.stringify(err));
				}
			});
		},
		async deleteWenzhang() {
			var self = this;
			uni.showModal({
				title: '提示',
				content: '确定删除吗',
				success: async function (res) {
					if (res.confirm) {
						var res = await self.Microi.ApiEngine.Run('delete_wenzhang', {
							Id: self.options.Id,
							Biaoming: 'diy_Biji'
						});
						if (res.Code == 1) {
							uni.reLaunch({
								url: '/pages/tabbar/find/find'
							});
						} else {
							self.Microi.Tips('删除失败', false);
						}
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		editWenzhang() {
			uni.navigateTo({
				url: '/pages/my/huodong/HDfabu?Id=' + this.options.Id + '&currentTab=2'
			});
		},
		shareUser(item, j) {
			if (item.Selected) {
				var index = this.shareUserInfo.userList.findIndex((val) => (val.YonghuID = item.YonghuID));
				if (index != -1) {
					this.shareUserInfo.userList.splice(index, 1);
				}
			} else {
				this.shareUserInfo.userList.unshift(item);
			}
			this.friendsList.Data[j].Selected = !this.friendsList.Data[j].Selected;
		},
		caozuoShow() {
			if (this.Islogin) {
				if (!this.friendsList.noData && !this.friendsList.Data.length) this.getFriendList();
				this.zhuanfaShow = true;
			} else {
				this.Microi.Tips('请先登录', false);
			}
		},
		async getFriendList() {
			var self = this;
			if (this.friendsList.noData) {
				this.Microi.Tips('暂无更多好友', false);
				return;
			}
			var res = await self.Microi.ApiEngine.Run('get_myFriendList', {
				YonghuID: self.CurrentUser.Id,
				page: this.friendsList.page
			});
			if (!res.Data.length) {
				this.friendsList.noData = true;
				return;
			}
			if (this.friendsList.page == 1) {
				this.friendsList.Data = res.Data;
			} else {
				this.friendsList.Data.push(...res.Data);
			}
			this.friendsList.page++;
		},
		searchHuati(item) {
			var name = item.name ? item.name : item;
			uni.navigateTo({
				url: '/pages/my/search/searchList?info=' + name + '&currentTab=0'
			});
		},
		async shareMessage() {
			var self = this;
			if (!self.shareUserInfo.userList.length) {
				this.Microi.Tips('请选择分享好友', false);
				return;
			}
			var res = await self.Microi.ApiEngine.Run('get_ShareUser', {
				userList: self.shareUserInfo.userList,
				PinglunNR: self.shareUserInfo.pinglunNR || self.userInfo.Name || self.userInfo.Account,
				Biaoming: 'sys_user',
				Id: this.options.Id
			});
			if (res.Code == 1) {
				this.Microi.Tips('分享成功', false);
				this.shareUserInfo = {
					userList: [],
					pinglunNR: ''
				};
				this.zhuanfaShow = false;
				return;
			} else {
				this.Microi.Tips(res.Msg, false);
			}
		}
	},
	/**
	 * 用户点击右上角分享
	 */
	onShareAppMessage: function (options) {
		var self = this;
		var path = '/pages/my/myDetail/myDetail';
		// 获取当前页面的路径
		var route = path + '?Id=' + this.options.Id;
		if (this.Islogin) {
			route = route + '&ShangjiID=' + this.CurrentUser.Id;
		}
		var imageUrl = '';
		if (this.userInfo.Avatar) {
			imageUrl = this.userInfo.Avatar;
		}
		var Row = {
			title: this.userInfo.Name || this.userInfo.Account,
			path: route,
			imageUrl: imageUrl,
			success: function (res) {
				// self.Microi.ApiEngine.Run('zhuanfa_Wenzhang', {
				// 	Biaoming: 'diy_Biji',
				// 	Id: self.options.Id
				// });
			}
		};
		return Row;
	},
	onPullDownRefresh() {
		this.getUserInfo();
		this.tabs = [
			{
				name: '名片'
			},
			{
				name: '笔记',
				page: 1,
				noData: false,
				Data: []
			}
		];
		this.changeTab({ index: this.currentTab });
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 500);
	},
	onReachBottom() {
		this.getMoreData();
	}
};
</script>

<style>
page {
	background: #808a9d;
}
.page {
	padding-bottom: 130rpx;
}
.hear-box {
	width: 100vw;
	box-sizing: border-box;
	position: fixed;
	z-index: 990;
}
.hear-box1 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100vw;
	box-sizing: border-box;
	padding: 34rpx;
	gap: 34rpx;
	transition: all 0.3s ease;
}
.scroll-bottom {
	background-color: #3d3d3d;
}

.headr-img {
	width: 40rpx;
	height: 40rpx;
}
.header-img {
	position: fixed;
	width: 100vw;
	height: 902rpx;
	z-index: -1;
	border-radius: 78rpx 78rpx 78rpx 78rpx;
}
.hear-mask {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 902rpx;
	background: linear-gradient(133deg, #3d3d3d 40%, #ffffff 100%);
	opacity: 0.5;
}
.header-img image {
	width: 100%;
	height: 100%;
	z-index: -2;
}

.user-school {
	font-weight: 400;
	font-size: 30rpx;
	color: #ffffff;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.user-box {
	display: flex;
	align-items: center;
	justify-content: flex-start;

	gap: 36rpx;
	width: 688rpx;
	margin: auto;
	box-sizing: border-box;
}
.user-avatar {
	width: 188rpx;
	height: 188rpx;
	border-radius: 50%;
}
.user-info {
	display: flex;
	justify-content: center;
	flex-direction: column;
	position: relative;
	height: 188rpx;
	font-weight: 400;
	font-size: 30rpx;
	color: #ffffff;
	line-height: 35rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
	flex: 1;
}
.user-name {
	display: flex; /* 
	align-items: center;
	justify-content: center; */
	gap: 18rpx;
	font-weight: 400;
	font-size: 40rpx;
	color: #ffffff;
	line-height: 47rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
	margin-bottom: 28rpx;
}
.user-name image {
	width: 32rpx;
	height: 32rpx;
}

.edit-info {
	background: #ffffff;
	border-radius: 32rpx 32rpx 32rpx 32rpx;
	padding: 12rpx 16rpx;
	box-sizing: border-box;

	font-family: PingFang SC, PingFang SC;
	font-size: 24rpx;
	color: #666;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.edit-info image {
	width: 24rpx;
	height: 24rpx;
}
.IP-container {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12rpx;
	height: 36rpx;
}
.user-work {
	font-weight: 400;
	font-size: 30rpx;
	color: #ffffff;
	text-align: left;
	font-style: normal;
	text-transform: none;
	line-height: 36rpx;
}
.IP-info {
	width: 108rpx;
	height: 36rpx;
	background: #000000;
	border-radius: 8rpx 8rpx 8rpx 8rpx;

	font-weight: 500;
	font-size: 22rpx;
	color: #ffffff;
	line-height: 36rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
	margin-top: 22rpx;
}
.count-container {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40rpx;
	/* gap: 112rpx; */
	margin-top: 22rpx;
	width: 100%;
}
.count-box {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 12rpx;

	font-weight: 800;
	font-size: 30rpx;
	color: #ffffff;
	line-height: 50rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.count-title {
	font-weight: 500;
	font-size: 20rpx;
	color: #ffffff;
	line-height: 34rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.my-Jineng {
	width: 688rpx;
	background: rgba(255, 255, 255, 0.25);
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	border: 2rpx solid rgba(240, 240, 240, 0.25);

	margin: auto;
	margin-top: 22rpx;
	padding: 22rpx 28rpx;
	box-sizing: border-box;
}
.jineng-title {
	/* width: 106rpx; */
	height: 30rpx;
	font-weight: 800;
	font-size: 26rpx;
	color: #ffffff;
	line-height: 30rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.jineng-container {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 32rpx 18rpx;
	margin-top: 22rpx;
}
.jineng-box {
	width: 138rpx;
	height: 44rpx;
	background: #000;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	line-height: 44rpx;
	font-family: Inter, Inter;

	font-size: 24rpx;
	color: #ffffff;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.container {
	position: relative;
	min-height: 70vh;
	z-index: 10;
	/* height: 80vh; */
	background: #f4f5f6;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	margin-top: 26rpx;
	overflow: hidden;
	/* padding: 0 30rpx; */
	box-sizing: border-box;
}
.tui-tabs {
	border-radius: 16rpx 16rpx 0 0;
	overflow: hidden;
	width: 100%;
	/* position: absolute;
	top: 0;
	left: 0;
	width: 100%; */
}
.scroll-view {
	padding: 30rpx;
	box-sizing: border-box;
	background-color: #fff;
	/* overflow-y: auto; */
}
.tuiJian-box {
	height: 158rpx;
	padding: 20rpx;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	margin-bottom: 16rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	background-color: #fff;
}
.left-box-TJ {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 20rpx;
}
.yichu-btn {
	width: 138rpx;
	height: 42rpx;
	background: #fb353b;
	border-radius: 30rpx 30rpx 30rpx 30rpx;

	font-family: PingFang SC, PingFang SC;
	/* font-weight: bold; */
	font-size: 28rpx;
	line-height: 42rpx;
	color: #ffffff;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.left-Avatar {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
}
.left-info {
	display: flex;
	/* align-items: center; */
	justify-content: space-between;
	flex-direction: column;
}
.left-header {
	display: flex;
	align-items: center;
	justify-content: flex-start;

	font-family: Roboto, Roboto;
	/* font-weight: 400; */
	font-size: 30rpx;
	color: #000000;
	text-align: left;
	font-style: normal;
	text-transform: none;
	gap: 16rpx;
}
.left-header image {
	width: 32rpx;
	height: 32rpx;
}
.left-line {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 16rpx;

	font-family: Roboto, Roboto;
	/* font-weight: 400; */
	font-size: 24rpx;
	color: #666666;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.no-Data-info {
	margin-top: 42rpx;
	display: flex;
	align-content: center;
	justify-content: center;
	flex-direction: column;
	gap: 26rpx;

	font-family: Inter, Inter;
	font-size: 28rpx;
	color: #999999;
	line-height: 33rpx;
	font-style: normal;
	text-transform: none;
	margin-left: 20rpx;
}
.no-Data {
	margin-top: 170rpx;
	display: flex;
	align-content: center;
	justify-content: center;
	flex-direction: column;
	gap: 26rpx;
	font-family: PingFang SC, PingFang SC;
	font-size: 28rpx;
	color: #999999;
	line-height: 33rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.no-Data image {
	width: 416rpx;
	height: 246rpx;
	margin: auto;
}
.MP-box {
	padding: 24rpx 0;
	min-height: 150rpx;
}
.MP-titleBox {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.MP-title {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12rpx;

	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	font-size: 28rpx;
	color: #000000;
	line-height: 33rpx;
	text-align: center;
	font-style: normal;

	text-transform: none;
}
.Rongyu-info {
	margin-top: 20rpx;
	font-family: Inter, Inter;
	font-weight: 400;
	font-size: 24rpx;
	color: #000000;
	text-align: left;
	font-style: normal;
	text-transform: none;
	margin-left: 20rpx;
}
.edit-image {
	width: 28rpx;
	height: 28rpx;
	padding: 20rpx;
}
.MP-title image {
	width: 8rpx;
	height: 28rpx;
}
.popup-info {
	height: 100vh;
	padding: 32rpx;
	width: 520rpx;
	box-sizing: border-box;
	background: #eef0f1;
	border-radius: 78rpx 0rpx 0rpx 78rpx;
	z-index: 999;
}

.popup-logo {
	width: 40rpx;
	height: 40rpx;
}
.popup-box {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	background-color: #fff;
	margin-bottom: 20rpx;
	box-sizing: border-box;
	width: 456rpx;
	height: 88rpx;
	padding: 20rpx;
	background: #ffffff;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	border: 1rpx solid #f3f5f9;

	font-weight: 500;
	font-size: 28rpx;
	color: #333333;
	line-height: 33rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.popup-box image {
	width: 36rpx;
	height: 36rpx;
	margin-right: 14rpx;
}
.tabbar-container {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 46rpx;
	margin-top: 22rpx;
	padding: 0 30rpx;
}
.tabbar-box {
	height: 40rpx;
	font-family: PingFang SC, PingFang SC;
	/* font-weight: 800; */
	font-size: 28rpx;
	color: #333333;
	line-height: 33rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;

	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8rpx;
}
.tabbar-box image {
	width: 28rpx;
	height: 28rpx;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
}

.qianming-popup {
	border-radius: calc(12rpx * 1.9) calc(12rpx * 1.9) 0px 0px;
	padding: 20rpx;
	padding-top: 10rpx;
}
.qianming-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: calc(14rpx * 1.9);
	margin: calc(16rpx * 1.9);
	box-sizing: border-box;
}
.qianming-popup textarea {
	width: 80%;
	padding: calc(9rpx * 1.9) calc(12rpx * 1.9);
	background-color: #f4f5f6;
	height: 100rpx;
	margin: auto;
	border-radius: 30rpx;

	font-family: Inter, Inter;
	font-weight: 400;
	font-size: 24rpx;
	color: #000000;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.qianming-title {
	font-size: calc(16rpx * 1.9);
}
.MingPian-tips-model {
	height: 230rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background: #ffffff;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	border: 2rpx solid #f4f5f6;
	padding: 36rpx 0 42rpx 0;
	font-family: PingFang SC, PingFang SC;
	font-weight: 800;
	font-size: 32rpx;
	color: #333333;
	text-align: center;
	font-style: normal;
	text-transform: none;
	gap: 36rpx;
}
.wanS-btn {
	width: 276rpx;
	height: 72rpx;
	background: #fb353b;
	border-radius: 98rpx 98rpx 98rpx 98rpx;

	font-family: PingFang SC, PingFang SC;
	font-weight: 800;
	font-size: 32rpx;
	line-height: 72rpx;
	color: #ffffff;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.biji-container {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-direction: column;
	gap: 10rpx;
	/* flex-wrap: wrap; */
}
.Shoucang-box {
	background-color: #f4f5f6;
	padding: 16rpx;
	/* height: 70vh; */
	display: flex;
	/* align-items: center; */
	justify-content: flex-start;
	gap: 10rpx;
}
.biji-box {
	background-color: #fff;
	width: 46vw;
	background: #ffffff;
	border-radius: 16rpx;
	overflow: hidden;
	position: relative;
}
.play-btn {
	position: absolute;
	top: 22rpx;
	right: 22rpx;
	width: 30rpx;
	height: 30rpx;
	border-radius: 50%;
	z-index: 990;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.1);
}
.LiuLanL-box {
	position: absolute;
	left: 3%;
	top: 1%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 2rpx;

	font-family: Roboto, Roboto;
	font-size: 28rpx;
	color: #ffffff;
	text-align: left;
	font-style: normal;
	text-transform: none;
	padding: 2rpx 10rpx;
	border-radius: 30rpx;
	background-color: rgba(0, 0, 0, 0.1);
}
.LiuLanL-box image {
	width: 32rpx;
	height: 32rpx;
}
.biji-image {
	width: 100%;
	background-color: #fff;
}
.biji-info {
	width: 100%;
	height: 122rpx;
	background: #ffffff;
	border-radius: 0rpx 0rpx 16rpx 16rpx;
	padding: 18rpx 16rpx;
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	gap: 18rpx;
	box-sizing: border-box;
}
.biji-biaoti {
	font-family: Roboto, Roboto;
	font-weight: 400;
	font-size: 28rpx;
	color: #333333;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.biji-line {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.left-box {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12rpx;
}
.left-box image {
	width: 36rpx;
	height: 36rpx;
	border-radius: 50%;
}
.biji-name {
	font-family: PingFang SC, PingFang SC;
	font-size: 24rpx;
	color: #666666;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.right-box {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8rpx;

	font-family: Inter, Inter;
	font-weight: 400;
	font-size: 24rpx;
	color: #ea3325;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.right-box image {
	width: 36rpx;
	height: 30rpx;
}
.pinglun-container {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-direction: column;
	gap: 20rpx;
	margin: 20rpx auto;
}
.pinglun-box {
	display: flex;
	justify-content: flex-start;
	gap: 14rpx;
	margin: auto;
}
.pinglun-box image {
	width: 62rpx;
	height: 62rpx;
	border-radius: 50%;
}
.pinglun-box .Pinglunuser-box {
	font-family: Inter, Inter;
	font-weight: 400;
	font-size: 24rpx;
	color: #000000;
	text-align: left;
	font-style: normal;
	text-transform: none;
	flex-direction: column;
	display: flex;
	justify-content: center;
	gap: 8rpx;
}
.pinglun-time {
	font-family: Inter, Inter;
	font-weight: 400;
	font-size: 20rpx;
	color: #999999;
	text-align: left;
	font-style: normal;
	text-transform: none;
	margin-top: 8rpx;
}
.pinglun-NR {
	width: 572rpx;
	/* height: 108rpx; */
	/* background: #f4f5f6; */
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	/* padding: 20rpx; */
	margin-top: 6rpx;

	font-family: Inter, Inter;
	font-weight: 400;
	font-size: 24rpx;
	color: #333333;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.Rongyu-info {
	margin-top: 20rpx;
	font-family: Inter, Inter;
	font-weight: 400;
	font-size: 24rpx;
	color: #000000;
	text-align: left;
	font-style: normal;
	text-transform: none;
	margin-left: 20rpx;
}
.no-GongSiLogo {
	width: 352rpx;
	height: 352rpx;
	background-color: #fb353b;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	font-family: PingFang SC, PingFang SC;
	font-weight: bold;
	font-size: 32rpx;
	color: #ffffff;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.no-img-box {
	width: 352rpx;
	height: 352rpx;
	background: #ede7fb;
	position: relative;

	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20rpx;
	box-sizing: border-box;
}
.bottom-bgc {
	position: absolute;
	bottom: 5%;
	right: 5%;

	width: 50rpx;
	height: 20rpx;
	background-color: #dac8e9;
}
.zhu-box {
	width: 8rpx;
	height: 28rpx;
	background: #fb353b;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
}
.no-img-nr {
	width: 100%;
	height: 80rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	font-size: 28rpx;
	color: #333333;
	text-align: center;
	font-style: normal;
	text-transform: none;

	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
}
.douhao-img {
	position: absolute;
	top: 5%;
	left: 5%;
	width: 50rpx;
}
.header-avatar {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}
.mbti-section {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 45%;
}

.mbti-char {
	font-size: 36rpx;
	font-weight: bold;
	color: #000;
	width: 36rpx;
	text-align: center;
	flex-shrink: 0; /* Prevent character from shrinking */
}

.mbti-bar-wrapper {
	flex: 1;
	display: flex;
	height: 48rpx;
	border-radius: 8rpx;
	overflow: hidden;
	background-color: #fff; /* White background for the middle separator */
	margin: 0 10rpx;
	position: relative;
}

.mbti-bar-left-fill,
.mbti-bar-right-fill {
	height: 100%;
	background-color: #4a90e2;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 24rpx;
	font-weight: bold;
	white-space: nowrap;
	box-sizing: border-box;
	transition: width 0.3s ease-in-out;
}
.mbti-bar-right-fill {
	background-color: #e15151;
}
.left-fill {
	clip-path: polygon(0% 0%, 100% 0%, calc(100% - 10rpx) 100%, 0% 100%);
}

.right-fill {
	clip-path: polygon(10rpx 0%, 100% 0%, 100% 100%, 0% 100%);
}
</style>
